<template>
  <div class="card" :style="{
      width: props.width!=undefined?props.width:'500px',
      height: props.height!=undefined?props.height:'200px'
    }">
    <div class="title" v-if="props.needTitle!=false?true:false">
      <span>
        {{ props.title }}
      </span>
    </div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script lang='ts' setup name='Card'>
const props = defineProps(['needTitle','title','width','height'])
</script>

<style scoped>
.card {
  background-color: #fff;
  border-radius: 10px;
  border: 1px solid #E4E7ED;
  margin: 10px;
  margin-top: 0;
}
.title {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #E4E7ED;
}
.title span{
  font-size: 18px;
  line-height: 50px;
  margin-left: 20px;
}
.content {
  padding: 10px;
  width: 100%;
  height: 100%;
}
</style>